<template>
	<view class="cdetails">
		<navbar title="选手点评" bgcolor="#6252DF" txcolor="#ffffff"></navbar>
		<view class="list">
			<view class="item p30">
				<view class="acea-row row-between-wrapper">
					<view class="acea-row row-middle">
						<view class="avatar">
							<image class="imgwh" :src="avatar" mode=""></image>
						</view>
						<view class=" ml20">
							<view class="fs32 fc333">{{ baomingData.title }}</view>
							<view class="fs32 fc666 mt10">{{ baomingData.phone }}</view>
						</view>
					</view>
				</view>
				<!-- <view class="acea-row row-middle mt30">
					<view>总评委5位/已有3位点评：</view>
					<view class="ava acea-row row-middle">
						<view class="avai">
							<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
						</view>
						<view class="avai">
							<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
						</view>
						<view class="avai">
							<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
						</view>
						<view class="avai">
							<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="mian mt30 p30">
			<view class="score">得分：{{ score }}</view>
			<block v-for="(item,index) in pingfenData" :key="index">
				<block v-if="item.max_fen==0">
					<view class="fc333 fs32 mt30 bold">{{ item.trackName }}（无上限）</view>
				</block>
				<block v-else>
					<view class="fc333 fs32 mt30 bold">{{ item.trackName }}（满分{{ item.max_fen }}分）</view>
				</block>
				<view class="acea-row row-middle mt30" style="margin-left: 100rpx;">
					<view class="iconfont icon-reduce-btn" :class="numberlist[index].score>0?'icon-on':''" 
					@click="reduce(index,item.num_fen,)"></view>
					<view class="fc333 fs40 mx50">{{ numberlist[index].score || 0 }}分</view>
					<block v-if="item.max_fen==0">
						<view class="iconfont icon-addition icon-on" @click="add(index,item.num_fen,item.max_fen)"></view>
					</block>
					<block v-else>
						<view class="iconfont icon-addition" :class="numberlist[index].score<item.max_fen?'icon-on':''"
						@click="add(index,item.num_fen,item.max_fen)"></view>
					</block>
				</view>
			</block>
			<view class="bor-bot mt30 mb30"></view>
			<nb-voice-record @startRecord="start" @endRecord="end" @cancelRecord="cancel"></nb-voice-record>
			
			<view class="p30" v-if="audioUrl">
				<sy-audio isCountDown ref="audio" 
				:src='audioUrl' audioCover='' subheading='未知' audioTitle='未知音源'></sy-audio>
				<view class="delbtn acea-row row-middle row-center" @click="delAudio">删除录音</view>
			</view>
			<!-- <view class="acea-row row-middle row-center yuyinbtn">
				<view class="iconfont icon-yuyin"></view>
				<view class="">语音点评</view>
			</view> -->
		</view>
		
		<view class="submit acea-row row-middle row-center" @click="open">确认提交</view>
		<view style="height: 100rpx;"></view>
		
		<uni-popup type="center" ref="popup">
			<view class="frame acea-row row-column row-middle row-around">
				<view class="fs36 fc333 bold">温馨提示</view>
				<view class="fs40 fc333 bold mt30">您确定提交点评结果吗?</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="btn bgccc fc9e" @click="close">取消</view>
					<view class="btn fcwhite bgtheme" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import store from '@/store';
	import{
		xuanshouDetails,
		uploadaudio,
		xuanshouDianPing
	} from '@/api/other.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import navbar from '../../components/navbar.vue';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				sysHeight: sysHeight,
				baoming_id:'',
				baomingData:[],
				pingfenData:[],
				score: '0.000',
				numberlist:[],
				audioUrl:'',
				// https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/cehi0000001.mp3
				avatar:'',
				
			};
		},
		onLoad(option) {
			let self = this;
			self.baoming_id = option.baoming_id;
			self.avatar = option.avatar;
			self.getmenu();
		},
		methods:{
			confirm(){
				let that = this;
				let data = {
					baoming_id: that.baoming_id,
					pingData: JSON.stringify(that.numberlist),
					mp3Url: that.audioUrl
				}
				xuanshouDianPing(data).then(res=>{
					that.$util.Tips({ title : res.msg },()=>{
						uni.navigateBack();
						// uni.navigateTo({
						// 	url: '/pages/home/comment-status'
						// })
					})
				}).catch(err=>{
					that.$util.Tips({ title: err })
				})
			},
			delAudio(){
				this.audioUrl = '';
			},
			uploadAudio(path){
				let that = this;
				uni.uploadFile({
					url: HTTP_REQUEST_URL + '/api/upload/upload_file', //仅为示例，非真实的接口地址
					filePath: path,
					name: 'file',
					formData: {
						'user': 'test'
					},
					header: {
						"Content-Type": "multipart/form-data",
						[TOKENNAME]: 'Bearer ' + store.state.app.token
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						console.log(data);
						console.log(data.data.url);
						this.audioUrl = data.data.url;
					}
				});
			},
			start() {
				// 开始录音
			},
			end(event) {
				// 结束录音并处理得到的录音文件
				// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
				// this.audioUrl = event.tempFilePath;
				this.uploadAudio(event.tempFilePath);
			},
			cancel() {
				// 用户取消录音
			},
			getmenu(){
				xuanshouDetails({ baoming_id: this.baoming_id }).then(res=>{
					this.baomingData = res.data.data.baomingData;
					this.pingfenData = res.data.data.pingfenData;
					let list = res.data.data.pingfenData;
					list.forEach((item,index,str)=>{
						let arr = { score:0 , dafen_id:0 }
						arr.dafen_id = item.id;
						arr.score = item.max_fen;
						this.numberlist.push(arr)
					});
					// setTimeout(()=>{})
					this.compute()
				})
			},
			close(){
				this.$refs.popup.close();
			},
			open(){
				this.$refs.popup.open();
			},
			reduce(i,val){
				let that = this;
				if( that.numberlist[i].score==0 ) return;
				let list = that.numberlist;
				let arr = JSON.parse(JSON.stringify(list));
				for( let k=0;k<list.length;k++ ){
					if( i==k ){
						arr[k].score = (parseFloat(arr[k].score) - parseFloat(val)).toFixed(3);
					}
				}
				that.numberlist = arr;
				that.compute()
			},
			add(i,val,max_fen){
				let that = this;
				if( that.numberlist[i].score == max_fen && max_fen>0 ) return;
				let list = that.numberlist;
				let arr = JSON.parse(JSON.stringify(list));
				for( let k=0;k<list.length;k++ ){
					if( i==k ){
						arr[k].score = (parseFloat(arr[k].score) + parseFloat(val)).toFixed(3);
					}
				}
				that.numberlist = arr;
				that.compute();
			},
			compute(){
				let that = this;
				let list = that.numberlist , score=0;
				for( let i=0;i<list.length;i++ ){
					score += parseFloat(list[i].score) 
				}
				that.score = parseFloat(score).toFixed(3);
				console.log(that.score);
			}
		},

	}
</script>

<style lang="scss">
	.cdetails{
		
		.list{
			
			.item{
				width: 100%;
				border-radius: 28rpx;
				background: #FFFFFF;
				margin-bottom: 30rpx;
				
				.avatar{
					width: 88rpx;
					height: 88rpx;
					overflow: hidden;
					border-radius: 50%;
				}
				
				.btn{
					width: 200rpx;
					height: 72rpx;
					border-radius: 80rpx;
					background: rgba(98, 82, 223, 0.2);
					color: #6252DF;
					font-size: 32rpx;
					text-align: center;
					line-height: 72rpx;
				}
				.avai{
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					overflow: hidden;
					position: relative;
					border: 2rpx solid #FFFFFF;
				}
				.avai~.avai{
					margin-left: -10rpx;
				}
				
			}
			
		}
		
		.mian{
			width: 100%;
			background-image: url('https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/commentbg.png');
			background-size: 100% 100%;
			
			.delbtn{
				width: 500rpx;
				height: 88rpx;
				border-radius: 12rpx;
				background: rgba(98, 82, 223, 0.2);
				color: #6252DF;
				font-size: 30rpx;
				margin: 30rpx auto 0 auto;
			}
			
			.score{
				width: 320rpx;
				height: 88rpx;
				border-radius: 10rpx;
				background: #FF2A00;
				color: #ffffff;
				font-size: 36rpx;
				margin: 0 auto;
				text-align: center;
				line-height: 88rpx;
			}
			
			.icon-reduce-btn{
				color: #A1A1A1;
				font-size: 48rpx;
			}
			.icon-addition{
				color: #A1A1A1;
				font-size: 52rpx;
			}
			.icon-on{
				color: #FFA154;
			}
			// .yuyinbtn{
			// 	width: 666rpx;
			// 	height: 100rpx;
			// 	border-radius: 50rpx;
			// 	background: rgba(0, 255, 34, 0.22);
			// 	color: #29C53E;
			// 	font-size: 30rpx;
				
			// 	.icon-yuyin{
			// 		font-size: 35rpx;
			// 		margin-right: 5rpx;
			// 	}
			// }
		}
		
		.submit{
			width: 690rpx;
			height: 108rpx;
			border-radius: 54rpx;
			background: rgba(98, 82, 223, 0.3);
			margin: 50rpx auto;
			color: #6252DF;
			font-size: 36rpx;
		}
		
		.frame{
			width: 660rpx;
			height: 380rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 30rpx;
			
			.btn{
				width: 240rpx;
				height: 70rpx;
				border-radius: 35rpx;
				text-align: center;
				line-height: 70rpx;
				margin: 0 20rpx;
				font-size: 28rpx;
			}
		}
		
	}
</style>
